<template>
	<view class="content">
		<view class="shaw">
			<u-subsection :list="array" :current="curNow" @change="sectionChange" mode="subsection">
			</u-subsection>
		</view>
		<view class="list">
			<view class="item" @click="goDetail(item.repairId)" v-for="(item,index) in list.value" :key="item.repairId">
				<view class="top">
					<text class="section">{{item.content}}</text>
					<text class="status" v-if="item.repairstatus==1">待处理</text>
					<text class="status" v-if="item.repairstatus==2">已派单</text>
					<text class="status" v-if="item.repairstatus==3">维修中</text>
					<text class="status" v-if="item.repairstatus==4">待验收</text>
					<text class="status" v-if="item.repairstatus==5">已完成</text>
					<text class="status" v-if="item.repairstatus==0">已取消</text>
				</view>
				<view class="center">
					报修位置：<text>{{item.region}} {{item.address}}</text>
				</view>
				<view class="center">
					故障类型：<text>{{item.repairtype}}</text>
				</view>
				<view class="center">
					预约时间：<text>{{item.ordertime}}</text>
				</view>
			</view>
		</view>

		<view class="goRepair" @click="goRepair">
			<image src="../../static/icon/add.png"></image>
		</view>
	</view>
</template>

<script setup>
	import{ref,reactive} from 'vue'
	import{onLoad,onShow} from'@dcloudio/uni-app'
	import api from "@/api/api"
	const array=['待处理', '已派单', '维修中', '待验收', '已完成','已取消']
	let curNow=ref(0)
	const goRepair=()=>{
		uni.switchTab({
			url: '/pages/onerepair/onerepair'
		})
	}
	const goDetail=(id)=>{
		uni.navigateTo({
			url: '/pages/myrepair/detail?repairId='+id,
			
		})
	}
	const sectionChange=(index)=>{
		curNow.value = index;
		let repairstatus=0
		switch(index){
			case 0:repairstatus=1;break;
			case 1:repairstatus=2;break;
			case 2:repairstatus=3;break;
			case 3:repairstatus=4;break;
			case 4:repairstatus=5;break;
			case 5:repairstatus=0;break;
		}
		api.getRepairList({
			repairstatus:repairstatus
		}).then(res=>{
			if(res.status=200){
				list.value=res.data
			}
		})
	}
	
	let list=reactive([])
	onShow(()=>{
		api.getRepairList({repairstatus:1}).then(res=>{
			if(res.status=200){
				list.value=res.data
			}
		})
	})
</script>

<style lang="scss">
	.content {

		margin: 30rpx;

		.shaw {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}

		.list {
			margin-top: 30rpx;
			

			.item {
				margin-bottom: 30rpx;
				background-color: white;
				padding: 20rpx;
				border-radius: 16rpx;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);

				.top {
					display: flex;
					justify-content: space-between;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
					border-bottom: 1rpx dashed #999999;

					.section {
						font-size: 32rpx;
						font-weight: bold;
					}

					.status {
						font-size: 32rpx;
						font-weight: bold;
						color: #F05C3E;
					}
				}

				.center {
					color: #666666;
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}

			}
		}

		.goRepair {
			position: fixed;
			bottom: 150rpx;
			right: 80rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
